// 发货单派单记录组件,注意要用反引号
Vue.component('invoice-dispatch-record', {
    template: `
       <el-dialog title="发货单派单记录" :visible.sync="dispatchDialog.show" width="70%" center :close-on-click-modal="0"
        @close="cancel" v-loading="dispatchDialog.loading" custom-class="handle-expend-dialog">
         <el-descriptions title="工程信息" :column="6" size="mini" border class="invoice-data-desc" label-class-name="invoice-data-desc-label">
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>项目名称
                </template>
                {{invoice.conName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-operation"></i>施工部位
                </template>
                {{invoice.site}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-operation"></i>强度等级
                </template>
                {{invoice.strengthName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-operation"></i>本车方量
                </template>
                {{invoice.proStere}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-truck"></i>累计车次
                </template>
                {{invoice.totalCar}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-operation"></i>累计方量
                </template>
                {{invoice.totalStere}}
            </el-descriptions-item>
         </el-descriptions>
            <template v-if="dispatchList == null || dispatchList.length == 0">
                <el-empty :image-size="200"></el-empty>
          </template>
          <el-table v-else :data="dispatchList" style="width: 100%" border>
            <el-table-column label="派单编号" prop="code" width="210"></el-table-column>
            <el-table-column label="派单类型" prop="uploadTypeTxt" width="100"></el-table-column>
            <el-table-column label="派单方量" prop="uploadStere" width="80"></el-table-column>
            <el-table-column label="生产方量" prop="proStere" width="80"></el-table-column>
            <el-table-column label="派单时间" prop="uploadTime" width="180"></el-table-column>
            <!--<el-table-column label="生产线"  width="80"></el-table-column>-->
            <el-table-column label="是否作废" width="150">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 1" type="danger">作废</el-tag>
                    <el-tag v-else >正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作人员" prop="creator" width="100"></el-table-column>
            <el-table-column label="备注" prop="remark" width="300"></el-table-column>
           </el-table>
        </el-dialog>
      `,
    props: {
        invoice: {
            type: Object,
            //  当参数是对象时,需要默认数据
            default: function () {
                let inv = {
                    id: null,
                };
                return inv;
            }
        },
        invoiceId: null,
    },
    data() {
        return {
            activeName: '',
            dispatchList: [],
            dispatchDialog: {
                show: false,
                loading: false,
            },
        };
    },
    created() {
        let that = this;
        that.invoiceId = that.invoice.id;
        that.loadExpendDatas();
    },
    methods: {
        //  加载操作记录
        loadExpendDatas() {
            let that = this;
            let invId = that.invoiceId;
            if (isNull(invId)) {
                that.$message({
                    showClose: true,
                    message: '请选择正确的发货单',
                    type: 'error'
                });
                return;
            }
            that.dispatchDialog.show = true;
            that.dispatchDialog.loading = true;
            $.ajax({
                type: "post",
                url: "/pro/invoice/dispatch/list/" + invId,
                async: true,
                dataType: 'json',
                data: {},
                success: function (res) {
                    if (res.code == 0) {
                        that.dispatchList = res.data;
                    } else {
                        that.$message({
                            showClose: true,
                            message: '查询发货单消耗数据失败：' + res.msg,
                            type: 'error'
                        });
                    }
                },
                error: function (res) {
                    that.$message({
                        showClose: true,
                        message: '请求失败，请联系管理员',
                        type: 'error'
                    });
                    return;
                },
                complete: function (XMLHttpRequest, status) {
                    that.dispatchDialog.loading = false;
                }
            })
        },
        handleClick(tab, event) {
            /*let that = this;
            let index = tab.index;
            let dayValue = that.dayValues[index];
            //  销售人员名
            let saleMan = dayValue.sheetName;*/
        },

        //  取消添加
        cancel() {
            let that = this;
            //  调用父级的关闭弹窗
            this.$emit("closed")
        },
    }
});

// 创建 Vue 实例
new Vue({
    el: '#app',
    data() {
        return {};
    }
});
